:root {
  --x-bar-fg: hsl(0 0% 0% / 0.5);
  --x-bar-bg-hover: hsl(0 0% 0% / 0.1);
  --x-bar-bg-active: hsl(0 0% 0% / 0.15);
  @media (prefers-color-scheme: dark) {
    --x-bar-fg: hsl(0 0% 100% / 0.5);
    --x-bar-bg-hover: hsl(0 0% 100% / 0.1);
    --x-bar-bg-active: hsl(0 0% 100% / 0.15);
  }
}
.main {
  display: grid;
  place-content: center;
  gap: 0.2rem;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  width: 3rem;
  height: 100%;
  &:hover {
    background: var(--x-bar-bg-hover);
  }
  &:active {
    background: var(--x-bar-bg-active);
  }
}
.line {
  border-radius: var(--x-border-radius);
  background: var(--x-bar-fg);
  width: 1rem;
  height: 2px;
}
